<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>个人中心</title>
    <link rel="stylesheet" href="../node_modules/weui/dist/style/weui.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body ontouchstart>
    <div class="page">
        <div class="page_hd">
            <h1 class="page_hd_txt">登录</h1>
        </div>
        <div class="page_bd" id="form">
            <div class="weui-cells weui-cells_form page-form">
                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label for="" class="weui-label page-label">账号</label>
                    </div>
                    <div class="weui-cell__bd weui-cell__primary">
                        <input type="text" id='input_account' name="username" class="weui-input" required placeholder="请输入账号" emptyTips="请输入账号">
                    </div>
                    <div class="weui-cell__ft">
                        <i class="weui-icon-warn"></i>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label for="" class="weui-label page-label">密码</label>
                    </div>
                    <div class="weui-cell__bd weui-cell__primary">
                        <input type="password" name="password" class="weui-input" required="" pattern="[\w]{6,}" emptyTips="请输入密码" notmatchtips="密码至少6位" placeholder="请输入密码">
                    </div>
                    <div class="weui-cell_ft">
                        <i class="weui-icon-warn"></i>
                    </div>
                </div>
            </div>
            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:login()">登录</a>
            </div>
            <div class="weui-btn-area page-login-area">
                <a href="reset_pwd.html">忘记密码</a>
            </div>
            <div id="historyRecord"></div>
        </div>
    </div>
    <script src="../node_modules/weui/dist/example/zepto.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.1/weui.min.js"></script>
    <script type="text/javascript">
        weui.form.checkIfBlur('#form');

        function login(){
            weui.form.validate('#form', function (error) {
                console.log(error);
                if (error==null) {
                    weui.topTips('账号或密码不正确',2000);
                    return ;
                }
                if (!error) {
                    var loading = weui.loading('登录中...');
                    setTimeout(function () {
                        loading.hide();
                        weui.toast('登录成功', 2000);
                    }, 1500);
                }
                // return true; // 当return true时，不会显示错误
            }, {
                regexp: {
                    
                }
            });
        }

        var records = ["历史记录1", "历史纪录2", "历史纪录3"];
        // var records=null;
        var listEl = document.getElementById("historyRecord");
        var content = "";
        if (records != null) {
            content += '<div class="weui-cells__title">历史账号</div>';
            content += '<div class=weui-cells>';
            for (var i = 0; i < records.length; i++) {
                content +='<div class="weui-cell">';
                content += '<div class="weui-cell__bd weui-cell_primary history_record">';
                content += '<p>' + records[i] + '</p>';
                content += '</div>';
                content += '<div class="weui-cell__ft">';
                content += '<i class="weui-icon-clear"></i>';
                content += ' </div>';
                content += '</div>';
            }
            content += '</div>';
        }
        else {
            content += '<div style="display: flex;align-items:center;">';
            content += '<span class="weui-cells__title">历史账号</span>';
            content += '<span style="float:right;padding-right:15px;">展开</span>';
            content += '</div>';
        }
        listEl.innerHTML += content;
        window.onload = function () {
            var classname = document.getElementsByClassName("history_record");
            var funny = function (j) {
                classname[j].onclick = function () {
                    document.getElementById("input_account").value = records[j];
                }
            }
            for (var j = 0; j < classname.length; j++) {
                funny(j);
            }
        }
    </script>
</body>
</html>